<template>
  <div :id="elId" class="pie_chart"></div>
</template>

<script>
import * as echarts from "echarts";
import { v4 as uuidv4 } from "uuid";

export default {
  props: ["data"],
  data() {
    return {
      elId: "",
    };
  },
  methods: {
    myEcharts() {
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById(this.elId));

      // 指定图表的配置项和数据
      let xLabel = ["2016", "2017", "2018", "2019", "2020", "2021", "2022"];
      //let valueData = [12, 18, 23, 21, 6, 10, 5];
      var option = {
        tooltip: {
          textStyle: {
            color: "#000",
          },
          padding: [10, 10],
          trigger: "axis",
          backgroundColor: "#fff",
          borderColor: "rgba(112, 119, 242, 0.8)",
          borderWidth: 1,
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          top:"15%",
          containLabel: true,
        },
        toolbox: {
          show: false,
        },
        xAxis: {
          type: "category",
          data: xLabel,
          axisLine: {
            lineStyle: {
              color: "rgba(193, 207, 220, 1)",
            },
          },
          axisLabel: {
            textStyle: {
              color: "rgba(0, 0, 0, 1)",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle: {
                color: "rgba(0, 0, 0, 1)",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#cdd5e2",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(193, 207, 220, 1)",
              },
            },
          },
        ],
        series: [
          {
            name: "成果数",
            type: "line",
            data: this.data,
            symbolSize: 10,
            symbol: "circle",
            smooth: true,
            yAxisIndex: 0,
            label: {
              show: true,
              textStyle: {
                color: "rgba(107, 49, 164, 1)",
                fontSize: 10,
                fontFamily: "DIN",
                fontWeight: "bold",
              },
              position: "top",
              formatter: function (p) {
                return p.value > 0 ? p.value : "";
              },
            },
            lineStyle: {
              width: 2,
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {
                  offset: 0,
                  color: "rgba(107, 49, 164, 0.5)",
                },
                {
                  offset: 1,
                  color: "rgba(107, 49, 164, 0.6)",
                },
              ]),
              shadowColor: "rgba(107, 49, 164, 0.4)",
              shadowBlur: 10,
              shadowOffsetY: 10,
            },
            itemStyle: {
              normal: {
                color: "rgba(107, 49, 164, 1)",
                borderColor: "#fff",
                borderWidth: 3,
                shadowColor: "rgba(107, 49, 164, 0.7)",
                shadowBlur: 5,
              },
            },
            areaStyle: {
              //区域填充样式
              normal: {
                //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
                color: new echarts.graphic.LinearGradient(
                  0,
                  0,
                  0,
                  1,
                  [
                    {
                      offset: 0,
                      color: "rgba(165, 170, 247, 1)",
                    },
                    {
                      offset: 0.5,
                      color: "rgba(165, 170, 247, 0.2)",
                    },
                    {
                      offset: 1,
                      color: "rgba(165, 170, 247, 0)",
                    },
                  ],
                  false
                ),
                shadowBlur: 0, //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
              },
            },
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
    },
  },
  mounted() {
    this.myEcharts();
  },
  created() {
    this.elId = uuidv4(); //获取随机id
  },
};
</script>

<style scoped>
.pie_chart {
  width: 360px;
  height: 200px;
  /* background-color: rgb(212, 212, 255); */
}
</style>